<template>
  <div>
    <TopNav :title="$route.meta.title" />
    <div class="main">
      <section class="goods_img">
        <img class="img" width="100%" :src="goods.goodsCoverImg" alt="" />
      </section>
      <section class="goods_desc">
        <p class="title">{{ goods.goodsName }}</p>
        <div class="yf">免运费</div>
        <p class="price">￥{{ goods.sellingPrice }}</p>
      </section>
      <section class="goods-intro">
        <ul>
          <li>概述</li>
          <li>参数</li>
          <li>安装服务</li>
          <li>常见问题</li>
        </ul>
        <div class="img_desc" v-html="goods.goodsDetailContent"></div>
      </section>
    </div>

    <van-goods-action height=" 1.33333rem;">
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="toCart"
        :badge="num"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        color="linear-gradient(90deg,#0dc3c3,#098888)"
        @click="addCart"
      />
      <van-goods-action-button
        color="linear-gradient(90deg,#0dc3c3,#098888)"
        type="danger"
        text="立即购买"
        @click="buy"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { getInfoData, addCart } from "../../api/index";
import TopNav from "@/components/topNav.vue";
export default {
  name: "Info",
  data() {
    return {
      goods: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      getInfoData(this.$route.params.productID).then((data) => {
        this.goods = data.data;
      });
    },
    toCart() {
      this.$router.push("/Cart");
    },
    addCart() {
      addCart({
        goodsId: this.$route?.params?.productID,
        goodsCount: 1,
      }).then((data) => {
        if (data.resultCode === 200) {
          localStorage.setItem("productID", this.$route.params.productID);
          this.$toast.success(data.message);
          this.$store.dispatch("changeCartListAsync");
        }
        if (data.resultCode === 500) {
          this.$toast.fail(data.message);
        }
      });
    },
    buy() {
      if (localStorage.getItem("productID")) {
        if (this.$route.params.productID == localStorage.getItem("productID")) {
        }
      }
      this.toCart();
    },
  },
  components: { TopNav },
  computed: {
    num() {
      return this.$store.state.cartList.length;
    },
  },
};
</script>
<style scoped lang="less">
.main {
  margin-top: 1.22667rem;
  .good_img {
    height: 5rem;
  }
  .goods_desc {
    padding: 0 0.26667rem;
    .title {
      font-size: 0.48rem;
      text-align: left;
      color: #333;
    }
    .yf {
      font-size: 0.37333rem;
      text-align: left;
      color: #999;
      padding: 0.13333rem 0;
    }
    .price {
      color: #f63515;
      font-size: 0.58667rem;
    }
  }
  .goods-intro {
    ul {
      display: flex;
      justify-content: space-around;
      margin: 0.26667rem 0;
      li {
        flex: 1;
        padding: 0.13333rem 0;
        text-align: center;
        font-size: 0.4rem;
        border-right: 0.02667rem solid #999;
        box-sizing: border-box;
      }

      :last-child {
        border-right: none;
      }
    }
    .img_desc {
      img {
        width: 100%;
      }
    }
  }
}
.img_desc  /deep/img{
  width: 100%;
}
</style>